<template>
  <div class="home">
    <!--    搜索-->
    <el-card style="margin-bottom: 40px" class="box-card" shadow="hover">
      <div style="display: flex">
        <div style="margin-right: 30px">
          <label class="el-form-item__label">订购金额: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入金额"
            v-model="params.ordersPrices"
          ></el-input>
        </div>
        <div style="margin-right: 30px">
          <label class="el-form-item__label">订单编号: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入订单编号"
            v-model="params.ordersId"
          ></el-input>
        </div>
        <div style="margin-right: 30px">
          <label class="el-form-item__label">明细金额: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入明细金额"
            v-model="params.ordersPrice"
          ></el-input>
        </div>

        <el-button style="margin-left: 5px" type="primary" @click="load">
          <i class="el-icon-search"></i>搜索
        </el-button>
        <el-button style="margin-left: 8px" @click="reset">
          <i class="el-icon-refresh-right"></i>重置
        </el-button>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div style="display: flex; margin-bottom: 10px">
        <span style="font-weight: bold">我的订单</span>
        <div class="fontStyle" style="margin-left: 1200px">
          <span>订购金额{{ allPrice }}元</span>
        </div>
      </div>

      <vxe-table
        border
        :column-config="{ resizable: true }"
        :tree-config="{ transform: true }"
        :data="tableData"
        align="center"
        ref="vxeTable"
        max-height="400"
      >
        <vxe-column field="ordersId" title="订单编号"></vxe-column>
        <vxe-column type="expand" width="80">
          <template #content="{ row }">
            <div class="expand-wrapper">
              <vxe-grid
                :columns="childCols"
                auto-resize
                :data="row.ordersDetails"
                align="center"
              ></vxe-grid>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="customerName" title="客户名称"></vxe-column>
        <vxe-column field="customerPhone" title="客户手机号"></vxe-column>
        <vxe-column field="customerAddress" title="客户地址"></vxe-column>
        <vxe-column field="email" title="邮编"></vxe-column>
        <vxe-column field="ordersTime" title="订购时间"></vxe-column>
        <vxe-column field="ordersPrices" title="订购金额"></vxe-column>
        <vxe-column width="80" title="操作">
          <template #default="{ row }">
            <el-popconfirm title="是否删除该订单" @confirm="delOrder(row)">
              <el-button slot="reference" type="text"> 删除 </el-button>
            </el-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>
      
      <script>
import request from "@/api/request";
import Cookies from "js-cookie";

export default {
  name: "StudentList",
  data() {
    return {
      customer: Cookies.get("customerInfo")
        ? JSON.parse(Cookies.get("customerInfo"))
        : {},
      childCols: [
        { type: "seq", title: "#", width: "100" },
        { field: "customerId", title: "客户号", width: "100" },
        { field: "ordersDetailId", title: "订单明细编号", width: "240" },
        { field: "ordersId", title: "订单编号", width: "240" },
        { field: "ordersNums", title: "订购数量" },
        { field: "ordersPrice", title: "金额" },
        { field: "ordersUnitPrice", title: "单价" },
        { field: "shopId", title: "商品代码" },
      ],
      tableData: [],
      allPrice: 0,

      params: {
        pageSize: 10,
        pageNum: 1,
        ordersPrices: "",
        customerId: "",
        customerName: "",
        ordersId: "",
        ordersPrice: "",
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
    calPrice() {
      this.allPrice = 0;
      this.tableData.forEach((el) => {
        this.allPrice += parseInt(el.ordersPrices);
      });
    },
    load() {
      this.params.customerId = this.customer.customerId;
      this.params.customerName = this.customer.customerName;
      request
        .get("/orders/page", {
          params: this.params,
        })
        .then((res) => {
          if (res.code === "200") {
            let cnt = 1;
            res.data.list.forEach((element) => {
              element.id = cnt++;
            });
            this.tableData = res.data.list;
            console.log(res);

            delete this.tableData.children;
            this.$refs.vxeTable.loadData(this.tableData);
            this.calPrice();
          }
        });
    },
    reset() {
      this.params = {
        pageSize: 10,
        pageNum: 1,
        ordersSrc: "",
      };
      this.load();
    },
    delOrder(row) {
      console.log(row);
      request.delete("/orders/delete/" + row.ordersId).then((res) => {
        if (res.code === "200") {
          this.$notify.success("删除成功");
          this.load();
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    // // 换页
    // handleCurrentChange(pageNum) {
    //   this.params.pageNum = pageNum;
    //   this.load();
    // },
    // del(ordersId) {
    //   request.delete("/orders/delete/" + ordersId).then((res) => {
    //     if (res.code === "200") {
    //       this.$notify.success("删除成功");
    //       this.load();
    //     } else {
    //       this.$notify.error(res.msg);
    //     }
    //   });
    // },
    // customerIdChange() {
    //   // console.log(this.Addform);
    //   request.get("/customerInfo/" + this.Addform.customerId).then((res) => {
    //     this.$set(this.Addform, "customerAddress", res.data.customerAddress);
    //     this.Addform.customerId = res.data.customerId;
    //     this.Addform.customerName = res.data.customerName;
    //     this.Addform.customerPhone = res.data.customerPhone;
    //   });
    // },
    // shopIdChange() {
    //   // console.log(this.Addform);
    //   request.get("/shop/" + this.Addform.shopId).then((res) => {
    //     this.$set(this.Addform, "marketPrice", res.data.marketPrice);
    //     this.Addform.marketPrice = res.data.marketPrice;
    //   });
    // },
    // computePrice() {
    //   this.Addform.ordersPrices =
    //     this.Addform.nums * parseInt(this.Addform.marketPrice);
    // },
  },
};
</script>
      
      <style scoped>
.el-form-item__label {
  align-items: flex-start;
  box-sizing: border-box;
  color: var(--el-text-color-regular);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--el-form-label-font-size);
  height: 32px;
  justify-content: flex-end;
  line-height: 32px;
  padding: 0 12px 0 0;
  font-weight: bold;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.fontStyle {
  color: #333436;
  font-family: "楷体";
  font-weight: 600;
  font-size: 20px;
  margin: 4px 4px 0 0;
}
</style>